<template>
<div v-loading="loading">
    <div>
       
        <div class="title">
          <el-row>
            <el-col :span="6">
                <label id="back" @click="back"><i class="el-icon-arrow-left"></i><span>返回</span></label>
                &nbsp;
            </el-col>
            <el-col :span="12">
               基本信息
            </el-col>
            <el-col :span="3">&nbsp;</el-col>
            <el-col :span="3"><i class="" ></i></el-col>
            </el-row>
        </div>
        <div class="row clearfix">
            <span>姓名</span>
            <div class="inp">
                <el-input v-model="basicInfo.name" placeholder="请输入内容" size="small"></el-input>
            </div>
        </div>
        <div class="row clearfix">
            <span>性别</span>
            <div class="inp">
                <el-radio v-model="basicInfo.Gender" label="1">男</el-radio>
                <el-radio v-model="basicInfo.Gender" label="2">女</el-radio>
            </div>
        </div>
        <div class="row clearfix">
            <span>电话</span>
            <div class="inp">
                <el-input v-model="basicInfo.tel" placeholder="请输入内容" size="small"></el-input>
            </div>
        </div>
        <div class="row clearfix">
            <span>年龄</span>
            <div class="inp">
                <el-input-number v-model="basicInfo.age" :min="1" :max="100" label="描述文字" size="small"></el-input-number>
            </div>
        </div>
        <div class="row clearfix">
            <span>职业</span>
            <div class="inp">
                <el-select v-model="inputs.job" filterable clearable placeholder="请选择" size="small">
                    <el-option
                    v-for="item in basicInfo.job"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </div>
        </div>
        <div class="row clearfix">
            <span>居住区域</span>
            <div class="inp">
                <el-select v-model="inputs.resid" filterable clearable placeholder="请选择" size="small">
                    <el-option
                    v-for="item in basicInfo.address"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </div>
        </div>
        <div class="row clearfix">
            <span>所选项目</span>
            <div class="inp">
                <el-select v-model="inputs.selpro" filterable clearable placeholder="请选择" size="small">
                    <el-option
                    v-for="item in basicInfo.pro"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </div>
        </div>
        <div class="row clearfix">
            <span>业务员</span>
            <div class="inp">
                <el-select v-model="inputs.sales" filterable clearable placeholder="请选择" size="small">
                    <el-option
                    v-for="item in basicInfo.sales"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </div>
        </div>
    </div>
    <div style="border-top: 1px solid #e6ebf5;">
        <div class="title">业务信息</div>
        <el-tabs type="border-card">
            <el-tab-pane label="需求">
                <div class="row clearfix">
                        <span>意向项目</span>
                    <div class="inp">
                        <el-select v-model="inputs.intepro" filterable multiple placeholder="请选择" size="small"  popper-class="sel">
                            <el-option
                            v-for="item in demand.inpro"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="row clearfix">
                    <span>住宅面积</span>
                    <div class="inp">
                        <el-select v-model="inputs.residence" filterable clearable placeholder="请选择" size="small">
                            <el-option
                            v-for="item in demand.residence"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="row clearfix">
                    <span>商业面积</span>
                    <div class="inp">
                        <el-select v-model="inputs.business" filterable clearable placeholder="请选择" size="small">
                            <el-option
                            v-for="item in demand.business"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="row clearfix">
                    <span>物业类型</span>
                    <div class="inp">
                        <el-select v-model="inputs.demandtype" filterable multiple placeholder="请选择" size="small">
                            <el-option
                            v-for="item in demand.demandtype"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="row clearfix">
                    <span>购买意图</span>
                    <div class="inp"> 
                        <el-select v-model="inputs.purchase" filterable clearable placeholder="请选择" size="small">
                            <el-option
                            v-for="item in demand.purchase"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="交易">
                <div class="row clearfix">
                    <div class="inp">
                        <el-checkbox v-model="trade.IsTrans">是否交易</el-checkbox>
                    </div>
                </div>
                
                <div class="row clearfix">
                    <span>交易时间</span>
                    <div class="inp">
                        <el-date-picker
                        v-model="trade.trDate"
                        type="date"
                        placeholder="选择日期"
                        value-format="yyyy-MM-dd"
                        size="small">
                        </el-date-picker>
                    </div>
                </div>
                <div class="row clearfix">
                    <span>交易金额</span>
                    <div class="inp">
                        <el-input v-model="trade.trMoney" placeholder="请输入内容" size="small"></el-input>
                    </div>
                </div>
                <div class="row clearfix">
                    <span>职业顾问</span>
                    <div class="inp">
                        <el-input v-model="trade.trAdviser" placeholder="请输入内容" size="small"></el-input>
                    </div>
                </div>
                <div class="row clearfix">
                    <span>交易项目</span>
                    <div class="inp">
                        <el-select v-model="inputs.trPro" filterable clearable placeholder="请选择" size="small">
                            <el-option v-for="item in trade.trPro" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </div>
                </div>
                <div class="row clearfix">
                    <span>交易房号</span>
                    <div class="inp">
                        <el-input  v-model="trade.trRoomId" placeholder="请输入内容" size="small"></el-input>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="扩展">
                <el-form ref="form" :model="form"  label-width="80px">
                    <!-- <el-form-item :label="item.FieldCaption" v-for="item in Dates" :key="item.FieldCaption">
                        <el-date-picker v-model="item.Value" type="date" placeholder="选择日期"  size="small">
                        </el-date-picker>
                    </el-form-item> -->
                    <div class="row rows clearfix" v-for="item in Dates" :key="item.FieldCaption">
                      <span>{{item.FieldCaption}}</span>
                      <div class="inp">
                          <el-date-picker v-model="item.Value" type="date" placeholder="选择日期"  size="small" value-format="yyyy-MM-dd">
                        </el-date-picker>
                      </div>
                  </div>
                    <!-- <el-form-item :label="item.FieldCaption" v-for="item in Strs" :key="item.Value">
                        <el-input :value="item.Value"  placeholder="请输入内容"  size="small" class="inp"></el-input>
                    </el-form-item> -->
                    <div class="row rows clearfix" v-for="item in Strs" :key="item.Value">
                      <span>{{item.FieldCaption}}</span>
                      <div class="inp">
                          <input type="text" value="" class="in">
                      </div>
                    </div>

                    <!-- <el-form-item :label="item.FieldCaption" v-for="item in numbers" :key="item.Value" >
                        <el-input-number v-model="item.Value" :min="1" :max="100"  size="small"></el-input-number>
                    </el-form-item> -->
                    <div class="row rows clearfix" v-for="item in numbers" :key="item.Value">
                      <span>{{item.FieldCaption}}</span>
                      <div class="inp">
                          <el-input-number v-model="item.Value" :min="1" :max="100"  size="small"></el-input-number>
                      </div>
                  </div>


                    <!-- <el-form-item :label="itemt.FieldCaption" v-for="itemt in items" :key="itemt.ValueID">
                        <el-select v-model="itemt.Value" multiple filterable clearable placeholder="请选择"  size="small" v-if="itemt.IsMulti">
                            <el-option v-for="item in itemt.FieldOptions" :key="item.ID" :label="item.CNName" :value="item.ID">
                            </el-option>
                        </el-select>
                        <el-select v-model="itemt.Value" filterable clearable placeholder="请选择"  size="small" v-else>
                            <el-option v-for="item in itemt.FieldOptions" :key="item.ID" :label="item.CNName" :value="item.ID">
                            </el-option>
                        </el-select>
                    </el-form-item> -->

                    <div class="row rows clearfix" v-for="itemt in items" :key="itemt.ValueID">
                      <span>{{itemt.FieldCaption}}</span>
                      <div class="inp">
                          <el-select v-model="itemt.Value" multiple filterable clearable placeholder="请选择内容"  size="small" v-if="itemt.IsMulti">
                            <el-option v-for="item in itemt.FieldOptions" :key="item.ID" :label="item.CNName" :value="item.ID">
                            </el-option>
                        </el-select>
                        <el-select v-model="itemt.Value" filterable clearable placeholder="请选择内容"  size="small" v-else>
                            <el-option v-for="item in itemt.FieldOptions" :key="item.ID" :label="item.CNName" :value="item.ID">
                            </el-option>
                        </el-select>
                      </div>
                  </div>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>
    <div class="btn">
        <el-button @click="fnCancel()" size="small">取消</el-button>
        <el-button @click="fnSub()" type="primary" size="small">确定</el-button>
    </div>
    
</div>

</template>
<script>
import Api from "../../kites/api";
export default {
  name: "addcus",
  data() {
    return {
      loading: false,
      form: {},
      basicInfo: {
        name: "",
        Gender: "1",
        tel: "",
        age: 1,
        job: [], //职业列表
        address: [], //居住区域列表
        pro: [], //项目列表
        sales: [] //销售人员列表
      }, //基础
      demand: {
        inpro: [], //意向项目
        residence: [], //住宅面积
        business: [], //商业面积
        demandtype: [], //需求类型
        purchase: [] //购买意图
      }, //需求
      trade: {
        trDate: "", //交易时间
        trMoney: "", //交易金额
        trAdviser: "", //职业顾问
        trPro: [], //交易项目
        trRoomId: "", //交易房号
        IsTrans: false //是否交易
      }, //交易
      numbers: [], //数字
      Strs: [], //字符
      Dates: [], //日期
      items: [], //列表
      //扩展
      extends: [],
      inputs: {
        job: "", //职业
        resid: "", //居住区域
        selpro: "", //所选项目
        sales: localStorage.busID, //业务员
        intepro: [], //意向项目
        residence: "", //住宅面积
        business: "", //商业面积
        demandtype: "", //需求类型
        purchase: "", //购买意图
        trPro: "" //交易项目
      } //所有下拉框
    };
  },
  mounted() {
    /*
        基础
      */
    //获取扩展
    this.getExtend();
    //获取项目列表
    this.getProjectList();
    //获取业务员列表
    this.getlist();
    //获取职业列表
    this.getdictjoblist();
    //获取居住区域列表
    this.getaddresslist();

    /*
            需求
        */
    //住宅面积
    this.getResidence();
    //商业面积
    this.getBusiness();
    //需求类型
    this.getDemandType();
    //购买意图
    this.getPurchase();
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    //获取项目列表
    getProjectList() {
      var me = this;
      this.$axios
        .post(Api.getprojectlist, {
          Para: "",
          PageSize: 10000,
          PageIndex: 0,
          OrderbyString: ""
        })
        .then(res => {
          if (res.data.isOK) {
            console.log(res);
            for (var i = 0; i < res.data.data.Data.length; i++) {
              //所选项目
              me.basicInfo.pro.push({
                value: res.data.data.Data[i].ID,
                label: res.data.data.Data[i].PName
              });
              //意向项目
              me.demand.inpro.push({
                value: res.data.data.Data[i].ID,
                label: res.data.data.Data[i].PName
              });
              //交易项目
              me.trade.trPro.push({
                value: res.data.data.Data[i].ID,
                label: res.data.data.Data[i].PName
              });
            }
          } else {
            me.$message.error(res.data.msg);
          }
        });
    },
    //获取业务员列表
    getlist() {
      var me = this;
      this.$axios
        .post(Api.getsaleslist, {
          Para: {
            ParendID: "",
            Key: ""
          },
          PageSize: 10000,
          PageIndex: 0,
          OrderbyString: "CNName"
        })
        .then(res => {
          if (res.data.isOK) {
            console.log(res);
            for (var i = 0; i < res.data.data.Data.length; i++) {
              me.basicInfo.sales.push({
                value: res.data.data.Data[i].ID,
                label: res.data.data.Data[i].CNName
              });
            }
          } else {
            me.$message.error(res.data.msg);
          }
        });
    },
    //获取扩展
    getExtend() {
      var me = this;
      this.$axios
        .post(Api.extendsbytype, {
          ExtendType: 2,
          BusinessID: ""
        })
        .then(res => {
          if (res.data.isOK) {
            me.extends = res.data.data;
            for (var i = 0; i < res.data.data.length; i++) {
              switch (res.data.data[i].DataType) {
                case 1:
                  me.Strs.push(res.data.data[i]);
                  break;
                case 2:
                  me.numbers.push(res.data.data[i]);
                  break;
                case 3:
                  me.Dates.push(res.data.data[i]);
                  break;
                case 4:
                  res.data.data[i].Value =
                    JSON.parse(res.data.data[i].Value) || [];
                  me.items.push(res.data.data[i]);
                  break;
                default:
              }
            }
          } else {
            me.$message.error(res.data.msg);
          }
        });
    },
    //获取职业列表，词典1
    getdictjoblist() {
      var me = this;
      this.$axios.get(Api.dictlist + "1").then(res => {
        if (res.data.isOK) {
          for (var i = 0; i < res.data.data.length; i++) {
            me.basicInfo.job.push({
              value: res.data.data[i].ID,
              label: res.data.data[i].DictName
            });
          }
        } else {
          me.$message.error(res.data.msg);
        }
      });
    },
    //获取居住区域列表，词典2
    getaddresslist() {
      var me = this;
      this.$axios.get(Api.dictlist + "2").then(res => {
        if (res.data.isOK) {
          for (var i = 0; i < res.data.data.length; i++) {
            me.basicInfo.address.push({
              value: res.data.data[i].ID,
              label: res.data.data[i].DictName
            });
          }
        } else {
          me.$message.error(res.data.msg);
        }
      });
    },
    //住宅面积
    getResidence() {
      var me = this;
      this.$axios.get(Api.dictlist + "3").then(res => {
        if (res.data.isOK) {
          for (var i = 0; i < res.data.data.length; i++) {
            me.demand.residence.push({
              value: res.data.data[i].ID,
              label: res.data.data[i].DictName
            });
          }
        } else {
          me.$message.error(res.data.msg);
        }
      });
    },
    //商业面积
    getBusiness() {
      var me = this;
      this.$axios.get(Api.dictlist + "4").then(res => {
        if (res.data.isOK) {
          for (var i = 0; i < res.data.data.length; i++) {
            me.demand.business.push({
              value: res.data.data[i].ID,
              label: res.data.data[i].DictName
            });
          }
        } else {
          me.$message.error(res.data.msg);
        }
      });
    },
    //需求类型
    getDemandType() {
      var me = this;
      this.$axios.get(Api.dictlist + "6").then(res => {
        if (res.data.isOK) {
          for (var i = 0; i < res.data.data.length; i++) {
            me.demand.demandtype.push({
              value: res.data.data[i].ID,
              label: res.data.data[i].DictName
            });
          }
        } else {
          me.$message.error(res.data.msg);
        }
      });
    },
    //购买意图
    getPurchase() {
      var me = this;
      this.$axios.get(Api.dictlist + "5").then(res => {
        if (res.data.isOK) {
          for (var i = 0; i < res.data.data.length; i++) {
            me.demand.purchase.push({
              value: res.data.data[i].ID,
              label: res.data.data[i].DictName
            });
          }
        } else {
          me.$message.error(res.data.msg);
        }
      });
    },

    //取消
    fnCancel() {
      this.$router.push({ path: "/Customer" });
    },
    //确认
    fnSub() {
      var me = this;
      var y = 0;
      me.loading = true;
      if (me.basicInfo.Gender == "1") {
        me.basicInfo.Gender = "男";
      } else if (me.basicInfo.Gender == "2") {
        me.basicInfo.Gender = "女";
      }
      for (var i = 0; i < me.extends.length; i++) {
        switch (this.extends[i].DataType) {
          case 1:
            for (var j = 0; j < this.Strs.length; j++) {
              me.Strs[j].Value = $(".in")
                .eq(j)
                .val();
            }
            for (var k = 0; j < this.Strs.length; k++) {
              me.extends[i] = me.Strs[k];
            }
            break;
          case 2:
            me.extends[i] = me.numbers[0];
            me.numbers.splice(0, 1);
            break;
          case 3:
            me.extends[i] = me.Dates[0];
            me.Dates.splice(0, 1);
            break;
          case 4:
            me.extends[i] = me.items[0];
            me.items.splice(0, 1);
            break;
          default:
        }
      }
      me.$axios
        .post(Api.addCus, {
          Extends: me.extends,
          ID: "",
          CNName: me.basicInfo.name,
          Tel: me.basicInfo.tel,
          ProjectID: me.inputs.selpro,
          SalerID: me.inputs.sales,
          Gender: me.basicInfo.Gender,
          Age: me.basicInfo.age,
          Profession: me.inputs.job, //职业
          FromDistrict: me.inputs.resid, //居住区域
          CreateMan: "",
          CreateDate: "",
          Demand_Project: JSON.stringify(me.inputs.intepro), //意向项目
          Demand_AreaH: me.inputs.residence, //意向住宅面积
          Demand_AreaB: me.inputs.business, //意向商业面积
          Demand_HouseType: JSON.stringify(me.inputs.demandtype), //意向物业类型
          Demand_Purpose: me.inputs.purchase, //购买意图
          IsTrans: me.trade.IsTrans, //是否交易
          Trans_Time: me.trade.trDate, //交易时间
          Trans_Money: me.trade.trMoney, //交易金额
          Trans_Counselor: me.trade.trAdviser, //职业顾问
          Trans_ProjectID: me.inputs.trPro, //交易项目
          Trans_HouseCode: me.trade.trRoomId //交易房号
        })
        .then(res => {
          if (res.data.isOK) {
            me.loading = false;
            me.$message({
              message: "录入成功",
              type: "success"
            });
            window.history.go(-1);
          } else {
            if (res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
              me.loading = false;
              me.$router.push("/Login");
            } else {
              me.loading = false;
              me.getExtend();
              me.$message.error(res.data.msg);
            }
          }
        });
    },
    //返回
    back() {
      window.history.go(-1);
    }
  }
};
</script>
<style scoped>
.title {
  width: 100%;
  padding: 0.5rem 0;
  margin-bottom: 1rem;
  font-size: 1.4rem;
  border-bottom: 1px solid #e6ebf5;
}
.row {
  min-height: 2.5rem;
  padding: 0 1rem;
  margin-bottom: 1rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-user-select: none;
  outline: none;

  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: transparent;
}
.row span {
  display: block;
  float: left;
  width: 25%;
  font-size: 1.2rem;
  height: 2.5rem;
  min-height: 2.5rem;
  text-indent: 0.5rem;
}
.row .inp {
  float: right;
  width: 73%;
  height: 100%;
  line-height: 2.5rem;
  font-size: 1rem;
}
.row .inp label {
  line-height: 2.5rem;
  float: left;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
.el-input-number {
  width: 100%;
}
.el-select {
  width: 100%;
}
.btn {
  line-height: 5rem;
}

.sel {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
  text-align: center;
}

.el-select-dropdown {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
  border: none;
  text-align: center;
}
.el-scrollbar {
  height: 100%;
}
.el-select-dropdown__wrap {
  max-height: 100%;
}

.clearfix:after {
  content: ".";
  width: 0;
  height: 0;
  visibility: hidden;
  display: block;
  clear: both;
  overflow: hidden;
}
#back {
  cursor: pointer;
}
.rows {
  padding: 0;
}
.inp input {
  -webkit-appearance: none;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 32px;
  line-height: 1;
  outline: 0;
  padding: 0 15px;
  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}
</style>


